<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-Type" content="text/html"  charset="utf-8"/>
    <title>机票订购</title>


    <link rel="stylesheet" href="css/basic.css" charset="utf-8">
    <link rel="stylesheet" href="css/lvyouzixun.css" charset="utf-8">
</head>

<body>


<header id="header">

    <div class="center">
        <h1 class="logo">旅行社</h1>
        <nav class="link">
            <h2 class="none">网站导航</h2>
            <ul >
                <li><a class="active" href="index.html">首页</a></li>
                <li><a class="active" href="information.html">旅游咨询</a></li>
                <li><a class="active" href="ticket.html">机票订购</a></li>
                <li><a class="active" href="view.html">风景欣赏</a></li>
                <li><a class="active" href="company.html">公司简介</a></li>

            </ul>
        </nav>
    </div>
</header>


<div id="headline">
    <div class="center">
        <hgroup>  <!--hgroup为标题组合群组，统一规范h-->
            <h2>旅游咨询</h2>
            <h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
        </hgroup>
    </div>
</div>
<!-- 模块区域，先id，子级用class -->
<div id="container">
    <aside class="sidebar">
        <!-- 侧栏aside -->
        <div class="sidebox recommed">
            <h2>景点推荐</h2>
            <div class="tag">
                <ul>
                    <li><a href="###">曼谷(12)</a></li>
                    <li><a href="###">日本(5)</a></li>
                    <li><a href="###">香港(2)</a></li>
                    <li><a href="###">美国(82)</a></li>
                    <li><a href="###">拉萨(15)</a></li>
                    <li><a href="###">意大利(12)</a></li>
                    <li><a href="###">马尔代夫(32)</a></li>
                    <li><a href="###">希腊(8)</a></li>
                    <li><a href="###">新西兰(2)</a></li>
                    <li><a href="###">英国(22)</a></li>
                    <li><a href="###">毛里求斯(62)</a></li>
                    <li><a href="###">埃及(32)</a></li>
                    <li><a href="###">迪拜(22)</a></li>
                    <li><a href="###">首尔(12)</a></li>
                    <li><a href="###">新加坡(20)</a></li>
                    <li><a href="###">台湾(30)</a></li>
                    <li><a href="###">泰国(42)</a></li>
                    <li><a href="###">马来西亚(26)</a></li>
                    <li><a href="###">大阪(100)</a></li>
                    <li><a href="###">越南(10)</a></li>
                    <li><a href="###">澳大利亚(66)</a></li>
                </ul>
            </div>
        </div>
        <div class="sidebox hot">
            <h2>热门旅游</h2>
            <div class="figure">
                <figure>
                    <img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <!-- figcaption为在图片下加文字 -->
                    <figcaption>
                        曼谷-芭提雅6日游
                    </figcaption>
                </figure>
                <figure>
                    <img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <!-- figcaption为在图片下加文字 -->
                    <figcaption>
                        曼谷-芭提雅6日游
                    </figcaption>
                </figure>
                <figure>
                    <img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <!-- figcaption为在图片下加文字 -->
                    <figcaption>
                        水龙湾6日游
                    </figcaption>
                </figure>
                <figure>
                    <img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <!-- figcaption为在图片下加文字 -->
                    <figcaption>
                        曼谷-芭提雅6日游
                    </figcaption>
                </figure>
                <figure>
                    <img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <!-- figcaption为在图片下加文字 -->
                    <figcaption>
                        曼谷-芭提雅6日游
                    </figcaption>
                </figure>
                <figure>
                    <img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <!-- figcaption为在图片下加文字 -->
                    <figcaption>
                        曼谷-清迈7日游
                    </figcaption>
                </figure>
                <figure>
                    <img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <!-- figcaption为在图片下加文字 -->
                    <figcaption>
                        海岸7日游
                    </figcaption>
                </figure>
                <figure>
                    <img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <!-- figcaption为在图片下加文字 -->
                    <figcaption>
                        曼谷-芭提雅6日游
                    </figcaption>
                </figure>
            </div>
        </div>
        <div class="sidebox treasure"><!--此处为头的名字，子级h2，在div区域块内放超链接-->
            <h2>旅游百宝箱</h2>
            <div class="box">
                <a href="###" class="trea1">天气预报</a>
                <a href="###" class="trea1">火车票查询</a>
                <a href="###" class="trea1">航空查询</a>
                <a href="###" class="trea1">地铁线路查询</a>
                <a href="###" class="trea1">公交线路查询</a>
                <a href="###" class="trea1">酒店预订</a>
                <a href="###" class="trea1">保险</a>
                <a href="###" class="trea1">签证</a>

            </div>
        </div>
    </aside>

    <div class="list ticket">
        <form action="###">
            <h2>机票预订</h2>	<!--4个模块区域-->
            <div class="type">
                <p>航班类型:<mark>单程</mark>往返</p>
            </div>

            <div class="form left">
                <p>
                    <label for="">出发城市</label>
                    <input type="text" name="from_city" id="from_city"  placeholder="城市名 ">
                </p>
                <p>
                    <label for="">返回城市</label>
                    <input type="text" name="to_city" id="to_city"  placeholder="城市名 ">
                </p>
            </div>

            <div class="form right">
                <p>
                    <label for="">出发时间</label>
                    <input type="text" name="from_time" id="from_time"  placeholder="时间/日期">
                </p>
                <p>
                    <label for="">返回时间</label>
                    <input type="text" name="to_time" id="to_time"  placeholder="时间/日期">
                </p>
            </div>
            <div class="form button">
                <button type="submit" class="submit">订票</button>
            </div>

        </form>
        <div class="new">
            <h2>最新机票</h2>
            <ul>
                <li>热门城市:</li>
                <li>北京</li>
                <li>上海</li>
                <li>广州</li>
                <li>深圳</li>
                <li>重庆</li>
                <li>成都</li>
                <li>杭州</li>
                <li>南京</li>
            </ul>
            <table>
                <thead>
                <tr> <!--标题th-->
                    <th>路线</th>
                    <th>日期</th>
                    <th>价格</th>
                    <th>税费</th>
                    <th>餐食</th>
                    <th>航班</th>
                    <th>预订</th>
                </tr>
                </thead>

                <tbody>
                <tr> <!--单元格td-->
                    <td>北京-成都</td>
                    <td>10-15</td>
                    <td class="price">¥745</td>
                    <td>¥50</td>
                    <td>有</td>
                    <td>春秋航空</td>
                    <td><a href="###" class="reserve">预订</a></td>
                </tr>
                <tr> <!--单元格td-->
                    <td>北京-上海</td>
                    <td>10-15</td>
                    <td class="price">¥545</td>
                    <td>¥50</td>
                    <td>有</td>
                    <td>春秋航空</td>
                    <td><a href="###" class="reserve">预订</a></td>
                </tr>
                <tr> <!--单元格td-->
                    <td>北京-深圳</td>
                    <td>10-15</td>
                    <td class="price">¥800</td>
                    <td>¥50</td>
                    <td>有</td>
                    <td>春秋航空</td>
                    <td><a href="###" class="reserve">预订</a></td>
                </tr>
                <tr> <!--单元格td-->
                    <td>北京-杭州</td>
                    <td>10-15</td>
                    <td class="price">¥555</td>
                    <td>¥50</td>
                    <td>有</td>
                    <td>春秋航空</td>
                    <td><a href="###" class="reserve">预订</a></td>
                </tr>
                <tr> <!--单元格td-->
                    <td>北京-广州</td>
                    <td>10-15</td>
                    <td class="price">¥1200</td>
                    <td>¥50</td>
                    <td>有</td>
                    <td>春秋航空</td>
                    <td><a href="###" class="reserve">预订</a></td>
                </tr>
                <tr> <!--单元格td-->
                    <td>北京-重庆</td>
                    <td>10-15</td>
                    <td class="price">¥885</td>
                    <td>¥50</td>
                    <td>有</td>
                    <td>春秋航空</td>
                    <td><a href="###" class="reserve">预订</a></td>
                </tr>
                <tr> <!--单元格td-->
                    <td>北京-昆明</td>
                    <td>10-15</td>
                    <td class="price">¥500</td>
                    <td>¥50</td>
                    <td>有</td>
                    <td>春秋航空</td>
                    <td><a href="###" class="reserve">预订</a></td>
                </tr>
                <tr> <!--单元格td-->
                    <td>北京-厦门</td>
                    <td>10-15</td>
                    <td class="price">¥995</td>
                    <td>¥50</td>
                    <td>有</td>
                    <td>春秋航空</td>
                    <td><a href="###" class="reserve">预订</a></td>
                </tr>
                <tr> <!--单元格td-->
                    <td>北京-长沙</td>
                    <td>10-15</td>
                    <td class="price">¥665</td>
                    <td>¥55</td>
                    <td>有</td>
                    <td>春秋航空</td>
                    <td><a href="###" class="reserve">预订</a></td>
                </tr>

                </tbody>

                <tfoot>
                <tr>
                    <td colspan="7"><a href="###" class="more">加载更多航班...</a></td>

                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<footer class="footer">
    <div id="top">
        <!--采用2个class，公共部分修改和独有修改维护方便 -->
        <div class="block left">
            <h3>合作伙伴</h3>
            <hr><!--加一个横线-->
            <ul>
                <li>途牛旅游网</li>
                <li>驴妈妈旅游网</li>
                <li>携程旅游网</li>
                <li>中国青年旅行社</li>
            </ul>
        </div>

        <div class="block center11">
            <h3>旅游FAQ</h3>
            <hr>
            <ul>
                <li>旅游合同签订方式</li>
                <li>儿童价是基于什么制定的?</li>
                <li>旅游的线路品质怎么界定的？</li>
                <li>单房差是什么?</li>
                <li>旅游保险有那些种类?</li>
            </ul>
        </div>


        <div class="block right">
            <h3>联系方式</h3>
            <hr>
            <ul>
                <li>微博:weibo.com/ycku</li>
                <li>邮件:252189983@qq.com</li>
                <li>地址:辽宁省xxx路</li>
            </ul>

        </div>
    </div>

    <div class="bottom">Copyright@YCUC 旅行社 | 中IUP程1516481号 | 旅行社经营许可证：ad-079797</div>

</footer>
</div>


</body>
</html>
